<template>
	<view class="uni-swiper-msg">
		   <swiper class="swiper" vertical="" autoplay="false" duration="500" interval="4000" @animationfinish="timer">
			    <swiper-item v-for="(item, index) in 1" :key="index">
				     <view @tap="notice(item)">第{{item}}个内容</view>
				    </swiper-item>
			   </swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kindlist: [],
				clickId: "",
				change: 0,
				topList: [],
				isLeftClick: false
			}
		},
		onReady() {
			this.getData()
			this.getNodesInfo();
		},
		methods: {
			setid(i) {
				this.clickId = "po" + i;
				this.change = i;
				// this.isLeftClick=true;
			},
			scroll(e) {
				// if(this.isLeftClick){
				// 	this.isLeftClick=false;
				// 	return;
				// }
				let scrollTop = e.target.scrollTop;
				// console.log(scrollTop)
				// 只能变前第三个，最后一个到不了底部，只能用滚动到底部事件
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop > h1 && scrollTop < h2) {
						this.change = i;
					}
				}
			},
			// 滚动到底部
			scrolltolower() {
				setTimeout(() => {
					this.change = 3;
				}, 80)
			},
			getNodesInfo() {
				//小程序没有doucument和window对象(undefined)
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".title").boundingClientRect().exec(res => {
					let nodes = res[0];
					let arr = [];
					nodes.map(item => {
						arr.push(item.top);
					})
					this.topList = arr;
				})
			},
			getData() {
				this.kindlist = [{
						title: "水果",
						list: ["苹果", "香蕉", "桔子", "芒果"]
					},
					{
						title: "家电",
						list: ["电视", "冰箱", "空调", "热水器"]
					},
					{
						title: "美食",
						list: ["牛排", "汉堡", "芝士", "意面", "奶茶", "奶茶", "奶茶"]
					},
					{
						title: "衣物",
						list: ["T 恤", "卫衣", "短裤", "帽子"]
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.uni-swiper-msg {

		padding: 20upx 20upx !important;

		flex-wrap: nowrap !important;

		display: flex !important;

		.uni-swiper-msg-icon {

			width: 50upx !important;

			margin-right: 20upx !important;

			image {

				width: 100% !important;

				flex-shrink: 0 !important;

			}

		}

		.swiper {

			font-size: 12px;

			width: 100% !important;

			height: 50upx !important;

			swiper-item {

				line-height: 50upx !important;

				font-size: 30upx !important;

				color: #F5283A !important;

				font-weight: 700 !important;

				view {

					overflow: hidden !important;

					white-space: nowrap !important;

					text-overflow: ellipsis !important;

				}

			}

		}

	}
</style>
